import React, { memo, useEffect } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'

import {
  getRadioRecommend
} from '../../store/actionCreators'

import { RecommendWrapper } from './style'
import HYThemeHeaderNormal from '@/components/theme-header-normal'
import HYRadioRecommendCover from '@/components/radio-recommend-cover'

export default memo(function HYRadioRecommend () {
  const { currentId, recommends } = useSelector(state => ({
    currentId: state.getIn(['djradio', 'currentId']),
    recommends: state.getIn(['djradio', 'recommends'])
  }), shallowEqual);
  const dispatch = useDispatch();


  useEffect(() => {
    if (currentId === 0) return;
    dispatch(getRadioRecommend(currentId));
  }, [currentId, dispatch])
  return (
    <RecommendWrapper>
      <HYThemeHeaderNormal title="优秀新电台" />
      <div className="radio-list">
        {
          recommends.slice(0, 5).map(item => {
            return <HYRadioRecommendCover info={item} key={item.id}></HYRadioRecommendCover>
          })
        }
      </div>
    </RecommendWrapper>
  )
})
